<template>
  <div class="register-detail-dialog" v-if="visible">
    <div class="detail-card">
      <div class="detail-header">
        <div>
          <span class="detail-name">{{ detailData?.patientName }}</span>
          <span class="detail-gender">{{ detailData?.patientGenderText }}</span>
          <span class="detail-age"
            >{{ detailData?.ageYear }}岁{{ detailData?.ageMonth }}月</span
          >
          <span class="detail-phone">{{ detailData?.patientPhone }}</span>
        </div>
        <span class="detail-close" @click="onClose">×</span>
      </div>
      <div class="detail-body">
        <div class="detail-row">
          <span class="label">诊号</span>
          <span class="value">{{ detailData?.visitNo }}</span>
        </div>
        <!-- 中医内科 · 张医生  初诊  普通 -->
        <div class="detail-row">
          <span class="label">医生</span>
          <span class="value"
            >{{ detailData?.deptName }} · {{ detailData?.roomName }}
            ·
            {{ detailData?.doctorName }}

            <span style="margin-left: 5px">{{
              detailData?.visitTypeText
            }}</span>
            <span style="margin-left: 5px">{{ detailData?.regTypeText }}</span>
          </span>
        </div>
        <div class="detail-row" style="justify-content: space-between">
          <div class="detail-row" style="margin-bottom: 0px">
            <span class="label">时间</span>
            <span class="value"
              >{{ detailData?.visitDate }} {{ detailData?.visitPeriodText }} 
              {{ detailData?.visitSeqNo}} {{ detailData?.visitStartTime }} ~ {{ detailData?.visitEndTime }}</span>
          </div>
          <span class="status">{{ detailData?.regStatusText }}</span>
        </div>
        <div class="detail-row" style="justify-content: space-between">
          <div class="detail-row" style="margin-bottom: 0px">
            <span class="label">费用</span>
            <span class="value price">￥{{  (detailData?.regFee/100).toFixed(2)}}</span>
          </div>
          <span class="status">{{ detailData?.payStatusText }}</span>
        </div>
        <div class="detail-row">
          <span class="label">渠道</span>
          <span class="value">{{ detailData?.regChannelText }}</span>
        </div>
        <div class="detail-row">
          <span class="label">备注</span>
          <span class="value">{{ detailData?.remark }}</span>
        </div>
      </div>
      <div class="detail-footer" v-if="detailData?.regStatus == '1' || detailData?.regStatus == '2' || detailData?.regStatus == '3'">
        <button class="btn-refund" @click="cancelRegisterApi">退号</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { cancelRegister } from '@/api/registerList';
const props = defineProps({
  detailData: Object,
  visible: Boolean,
});
const { detailData } = toRefs(props);
const emits = defineEmits(['close', 'refund','refundSuccess']);

function onClose() {
  emits('close');
}

const cancelRegisterApi = async () => {
  ElMessageBox.confirm('确定进行退号操作?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const res = await cancelRegister(detailData?.value?.registerId);
    if (res.code === '200') {
      ElMessage.success('退号成功');
      emits('refundSuccess');
      onClose();
    } else {
      //ElMessage.error(res.msg);
    }
  });
};

function onRefund() {
  emits('refund');
}
</script>

<style lang="scss" scoped>
.register-detail-dialog {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-card {
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  width: 386px;
  background: #fff;
  overflow: hidden;
  border-radius: 12px;
  color: #222;
  padding-bottom: 20px;
}
.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 24px;
  color: #222;
  background: linear-gradient(90deg, #f5fefd 0%, #fbfbfa 100%);
}
.detail-name {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  margin-right: 8px;
}
.detail-gender {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
  margin-right: 8px;
}
.detail-age {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
  margin-right: 8px;
}
.detail-phone {
  margin-left: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
}
.detail-close {
  font-size: 16px;
  color: #999;
  cursor: pointer;
  margin-left: 18px;
  font-weight: 400;
  transition: color 0.2s;
}
.detail-close:hover {
  color: #18b3ab;
}
.detail-body {
  padding: 10px 24px 0 24px;
}
.detail-row {
  display: flex;
  font-size: 16px;
  color: #222;
  margin-bottom: 12px;
}
.label {
  color: #999;
  min-width: 40px;
  font-size: 14px;
}
.value {
  color: #333;
  margin-right: 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
}
.price {
  color: #18b3ab;
}
.status {
  color: #bdbdbd;
  font-size: 14px;
  margin-left: 8px;
}
.detail-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 24px 10px 24px;
}
.btn-refund {
  background: #fff;
  color: #18b3ab;
  border: 1.5px solid #d9d9d9;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.btn-refund:hover {
  background: #e6f7f5;
}
</style>
